<template>
  <div>
    <h1>store中的count:{{ count }}</h1>
    <h1>store中的num:{{ num }}</h1>
    <!-- 方式一： -->
    <!-- <h1>count平方{{ $store.getters.countSqrt }}</h1> -->

    <!-- 方式三 -->
    <h1>count平方{{ countSqrt }}</h1>

    <button @click="increase">+1</button>
    <button @click="increaseN({ n: 3 })">+n</button>

    <button @click="increaseNWait({ n: 20 })">过一秒+ n</button>
  </div>
</template>

<script>
  import { mapMutations, mapState, mapActions, mapGetters } from "vuex";
  export default {
    name: "Item",
    computed: {
      ...mapState("Item", ["count", "num"]),
      ...mapGetters("Item", ["countSqrt"]),
    },
    methods: {
      ...mapMutations("Item", ["increase", "increaseN"]),
      ...mapActions("Item", ["increaseWait", "increaseNWait"]),
    },
  };
</script>

<style></style>
